<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> vue中的监听器 watch</title>
    <script src="https://unpkg.com/vue@next" ></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
    <p>
        <input v-model="question" />
    </p>
    <p>{{ answer }}</p>
</div>
</body>   
<script>  
    const watchExampleVM = Vue.createApp({
    data() {
      return {
        question: '',
        answer: 'Questions usually contain a question mark. ;-)'
      }
    },
    watch: {
      question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') > -1) {
          this.getAnswer()
        }
      }
    },
    methods: {
      getAnswer() {
        this.answer = 'Thinking...'
        axios
          .get('https://yesno.wtf/api')
          .then(response => {
            this.answer = response.data.answer
          })
          .catch(error => {
            this.answer = 'Error! Could not reach the API. ' + error
          })
      }
    }
  }).mount('#app')
    /*
     // watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

        它可以监听data中值的变化 做出相应的操作 
         watch监听器的作用 就是监听有个dada中的值的变化 变化后可以写一个方法 进行下一步操作(业务逻辑)    

        监听器 属性可以接收两个参数 一个是现在的值(current) 一个是变化之前的值(prev)  
        watch:{
            count(current,prev){
                console.log('watch changed')
                console.log('现在的值：',current)
                console.log('变化前的值：',prev)
            }
        },
        

        监听属性 & 计算属性区别 
            计算属性必须return要返回一个值  在页面渲染的同时就会执行里边的业务逻辑 
            watch 只有发生变化时 才会执行不需要return(返回值) 
        method watch computed三者优先级  
            computed和methods都能实现的功能 建议使用computed 因为有缓存 不用渲染 
            computed和watch  都能实现的功能 建议使用computed 因为更加简洁 
            computed  和  watch vs methods区别
            computed-----计算属性  该属性是将数据挂载vue实例上 具有缓存 优点：避免重复计算
            watch-----      -监听 起 观察作用 监听已经挂载vue实例上的数据（data里面值）
            我们可以使用 methods 来替代 computed，效果上两个都是一样的 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
            而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
        */

</script>
</html>